<!--
 * @Description: 修改个人信息页面组件
 * @Author: hai-27
 * @Date: 2020-02-20 17:22:56
 * @LastEditors: hai-27
 * @LastEditTime: 2020-03-12 19:34:00
 -->
<template>
    <div>
        <el-form label-width="auto" style="max-width: 600px">
            <el-form-item label="账号">
                <el-input v-model="user.name" placeholder="请输入名字:" autocomplete="off"/>
            </el-form-item>

            <el-form-item label="昵称">
                <el-input v-model="user.nickName" placeholder="请输入昵称:" autocomplete="off"/>
            </el-form-item>

            <el-form-item label="手机号">
                <el-input v-model="user.phone" placeholder="请输入手机号:" autocomplete="off"/>
            </el-form-item>

            <el-form-item label="邮箱">
                <el-input v-model="user.email" placeholder="请输入邮箱:" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="余额">
                <el-input :readonly="true" :disabled="true" v-model="user.balance" autocomplete="off"/>
            </el-form-item>

            <el-button class="shop-cart" @click="updateUser()">修改</el-button>
            <el-button class="shop-cart" @click="showChargeDialog()">充值</el-button>
        </el-form>

        <el-dialog title="充值" width="300px" center :visible.sync="dialogVisible">
            <el-form>
                <el-form-item prop="charge">
                    <el-input  prefix-icon="el-icon-user-solid" placeholder="请输入金额" v-model.number="newBalance"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="medium" type="primary" @click="reCharge()" style="width:100%;">充值</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
    import {mapActions} from "vuex";

    export default {
        data(){
            return {
                user: "",
                dialogVisible: false,
                newBalance: "",
            };
        },
        created() {
            this.getUser(this.$store.getters.getUser.id);
        },
        methods: {
            ...mapActions(["setUser", "setShowLogin"]),
            getUser(val){
                // 判断是否登录,没有登录则显示登录组件
                if (!this.$store.getters.getUser) {
                    this.$store.dispatch("setShowLogin", true);
                    return;
                }
                this.$axios
                    .get(`user/selectById/${val}`)
                    .then(res => {
                        if (res.code === 0) {
                            this.user = res.data;
                        }
                    })
                    .catch(err => {
                        return Promise.reject(err);
                    });
            },
            updateUser(){
                this.$axios
                    .put("/user/update", this.user)
                    .then(res => {
                        if (res.code === 0) {
                            // 登录信息存到本地
                            let user = JSON.stringify(this.user);
                            localStorage.setItem("user", user);
                            // 登录信息存到vuex
                            this.setUser(this.user);
                            this.notifySucceed(res.msg);
                        } else {
                            //修改失败
                            this.notifyError(res.data.msg);
                        }
                    })
                    .catch(err => {
                        return Promise.reject(err);
                    });
            },
            showChargeDialog(){
                this.dialogVisible = true;
            },
            reCharge(){
                this.user.balance += this.newBalance;
                this.$axios
                    .put("/user/reCharge", this.user)
                    .then(res => {
                        if (res.code === 0) {
                            // 登录信息存到本地
                            let user = JSON.stringify(this.user);
                            localStorage.setItem("user", user);
                            // 登录信息存到vuex
                            this.setUser(this.user);
                            this.notifySucceed(res.msg);
                            this.dialogVisible = false
                        } else {
                            //修改失败
                            this.notifyError(res.data.msg);
                        }
                    })
                    .catch(err => {
                        return Promise.reject(err);
                    });
            },
        }
    };
</script>
<style scoped>

</style>